<template>
  <div class="category-box">
    <ly-tab
      v-model="selectedId"
      :items="items"
      :options="options"
      @change="handleChange"
      class="lyTab"
    ></ly-tab>
    <div class="touch-box">
      <v-touch
        v-on:swipeleft="swiperleft"
        v-on:swiperight="swiperright"
        class="wrapper clear-fix"
        style="touch-action:pan-y !important;"
      >
        <!-- 需要监听的内容 -->
        <keep-alive>
          <router-view />
        </keep-alive>
      </v-touch>
    </div>
    <div class="addhouse-box" v-show="hidshow" @click="toAddHouse" >
      <van-icon name="add"  />
    </div>
    <tab-bar class="tab-bar-box" />
  </div>
</template>

<script>
import TabBar from "components/common/tabbar/TabBar";
import { mapMutations,mapState}  from 'vuex'

export default {
  components: {
    TabBar,
  },
  data() {
    return {
      selectedId: 0,
      items: [
        { label: "全部" },
        { label: "未出租" },
        { label: "已出租" },
        { label: "待审核" },
        { label: "已下架" },
      ],
      options: {
        activeColor: "#FF5654",
        // 可在这里指定labelKey为你数据里文字对应的字段
      },
      subRouteUrl: [
        "/rentstate/allstate",
        "/rentstate/norent",
        "/rentstate/rentout",
        "/rentstate/awaitcheck",
        "/rentstate/soldout",
      ],
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      hidshow: true, //显示或者隐藏footer,
      isResize: false, //默认屏幕高度是否已获取
    };
  },
  methods: {
    ...mapMutations({
      getCurrentRentPath:"moduleUser/getCurrentRentPath"
    }),
    handleChange() {
      this.$router.replace(this.subRouteUrl[this.selectedId]);
      localStorage.setItem("currentRentPath",this.subRouteUrl[this.selectedId])
      this.getCurrentRentPath(this.subRouteUrl[this.selectedId])
      console.log(this.subRouteUrl[this.selectedId]);
    },
    swiperleft() {
      if (this.selectedId == this.items.length - 1) return false;
      this.selectedId += 1;
      this.$router.replace(this.subRouteUrl[this.selectedId]);
      localStorage.setItem("currentRentPath",this.subRouteUrl[this.selectedId])
      this.getCurrentRentPath(this.subRouteUrl[this.selectedId])
    },
    swiperright() {
      if (this.selectedId == 0) return false;
      this.selectedId -= 1;
      this.$router.replace(this.subRouteUrl[this.selectedId]);
      localStorage.setItem("currentRentPath",this.subRouteUrl[this.selectedId])
      this.getCurrentRentPath(this.subRouteUrl[this.selectedId])
    },
    toAddHouse(){
      if(!this.userId){
        this.$router.push('/login')
        return
      }
      this.$router.push('/houserentout')
    }
  },
  created() {
    console.log(this.$route.path);
    this.selectedId = this.subRouteUrl.indexOf(this.$route.path);
  },
  beforeRouteLeave(to,from,next){
    console.log(this.$route.path);
    localStorage.setItem("currentRentPath",this.$route.path)
    this.getCurrentRentPath(this.$route.path)
    next()
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        if (!this.isResize) {
          //默认屏幕高度
          this.docmHeight = document.documentElement.clientHeight;
          this.isResize = true;
        }
        //实时屏幕高度
        this.showHeight = document.body.clientHeight;
        console.log(this.showHeight);
      })();
    };
  },
  watch: {
    showHeight() {
      if (this.docmHeight >= this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
      console.log(this.hidshow);
    },
  },
  activated(){
    this.selectedId = this.subRouteUrl.indexOf(this.$route.path)
  },
  computed:{
    ...mapState({
      userId:state => state.moduleUser.userId
    })
  }
};
</script>

<style scoped>
.category-box {
  position: relative;
  height: 100vh;
  padding-bottom: 55px;
  padding-top: 45px;
}
.lyTab {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 9999;
}
.touch-box {
  position: absolute;
  top: 45px;
  bottom: 55px;
  right: 0;
  left: 0;
}
.wrapper {
  touch-action: pan-y !important;
  height: 100% !important;
}
.addhouse-box {
  position: fixed;
  bottom: 60px;
  right: 15px;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  font-size: 40px;
  font-weight: 550;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
  color: #ff5654;
}
</style>